<template>
  <div class="album">
    <header>
      <div
        class="headerbg"
        :style="{ background: 'url(' + this.picbackground + ')' }"
      >
        <!-- picbackground -->
      </div>
      <div class="innerbox">
        <div class="imgbox">
          <img :src="this.picbackground" />
          <i class="iconfont icon-erji">{{this.playCount|formatPlayCount}}</i>
          <span>歌单</span>
        </div>
        <div class="textbox">
          <h2>{{ this.tittle }}</h2>
          <div class="bottom">
            <div class="headimgbox">
              <img :src="this.header" />
            </div>
            <span>{{ this.username }}</span>
          </div>
        </div>
      </div>
    </header>
    <h3>歌曲列表</h3>
    <newMusic></newMusic>
   <div class="box">
     <p >下载app获取更多歌单</p>
   </div>
    <!-- 底部 -->
    <!-- <footer>
      <div class="warp">
        <button class="open">打开</button>
        <button class="download">下载</button>
      </div>
    </footer> -->
  </div>
</template>

<script>
import { playlist } from "@/api/hot";
import newMusic from "@/components/recommend/newMusic.vue";
export default {
  components: {
    newMusic,
  },
  data() {
    return {
      picbackground: "",
      tittle: "",
      header: "",
      username: "",
      playlist: [],
      trackIdsList: [],
      idList: [],
      playCount:""
    };
  },
  created() {
    playlist(this.$route.query.ID).then((res) => {
      // 专辑名
      this.tittle = res.data.playlist.name;
      // 头像
      this.header = res.data.playlist.creator.avatarUrl;
      // 用户名
      this.username = res.data.playlist.creator.nickname;
      // 专辑和背景
      this.picbackground = res.data.playlist.coverImgUrl;

      this.playCount=res.data.playlist.playCount

      this.trackIdsList = res.data.playlist.trackIds;
      this.trackIdsList.forEach((item) => {
        this.idList.push(item.id);
      });
      this.$store.dispatch("idListdata", this.idList);
    });
  },
};
</script>

<style lang="scss" scoped>
.album {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  header {
    height: vw(250);
    position: relative;
    padding: 30px 10px 30px 15px;
    overflow: hidden;
    .headerbg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      -webkit-filter: blur(20px);
      filter: blur(20px);
      -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
      transform: scale(1.5);
      &:after {
        content: " ";
        background-color: rgba(0, 0, 0, 0.25);
      }
    }
    .innerbox {
      display: flex;
      position: relative;
      z-index: 2;
      .imgbox {
        width: 145px;
        height: 145px;
        position: relative;
        &:after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 18px;
          z-index: 2;
          background-image: -webkit-linear-gradient(
            left,
            rgba(0, 0, 0, 0),
            rgba(41, 39, 39, 0.2)
          );
          background-image: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.2)
          );
        }
        img {
          width: 100%;
        }
        i {
          position: absolute;
          right: 2px;
          top: 0;
          z-index: 3;
          padding-left: 15px;
          color: #fff;
          font-size: 12px;
          background-position: 0;
          background-repeat: no-repeat;
          background-size: 11px 10px;
          text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
          letter-spacing: 0.2em;
        }
        span {
          position: absolute;
          z-index: 3;
          top: 10px;
          left: 0;
          padding: 0 8px;
          height: 17px;
          color: #fff;
          font-size: 9px;
          text-align: center;
          line-height: 17px;
          background-color: rgba(217, 48, 48, 0.8);
          border-top-right-radius: 17px;
          border-bottom-right-radius: 17px;
        }
      }
      .textbox {
        flex: 1 1 auto;
        width: 1%;
        margin-left: 16px;
        h2 {
          padding-top: 1px;
          font-size: 17px;
          line-height: 1.3;
          color: #fefefe;
          height: 44px;
          display: -webkit-box;
          -webkit-box-pack: center;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .bottom {
          display: flex;
          align-items: center;
          position: relative;
          margin-top: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
          .headimgbox {
            border-radius: 50%;
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 5px;
            img {
              width: 100%;
            }
          }
          span {
            color: #fefefe;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
          }
        }
      }
    }
  }
  h3 {
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    background-color: #eeeff0;
  }
  .box{
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: 51.73333vw;
    background-image: linear-gradient(180deg,hsla(0,0%,97.3%,.7),#f8f8f8 60%);
    p{
      text-align: center;
      margin-top: 22%;
    }
  }
}
</style>